<!--
  @desc: 本次变更事项
  @author: lanbao
-->
<template>
  <div class='changeItem'>
    <ul class="content">
      <li class="item" v-for="(items, i) in contentList" :key="i">
        <div v-for="(child, j) in items.children" :key="j">
          <p class="itemKey">{{child.title}}</p>
          <p class="itemVal">{{child.val}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      contentList: [
        {
          children: [
            {title: '变更事项编号', val: 'SX987SSX987652'},
            {title: '变更事项描述', val: 'XXXXXX'},
            {title: '具体变更事项', val: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'}
          ]
        },
        {
          children: [
            {title: '变更事项编号', val: 'SX987SSX987652'},
            {title: '变更事项描述', val: 'XXXXXX'},
            {title: '具体变更事项', val: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'}
          ]
        }
      ]
    }
  }
}</script>

<style lang="stylus" scoped>
  .changeItem
    background #F4F4F4
    width 100%
    padding 10px 0
    .content
      width 95%
      height auto
      border-radius 8px
      margin 0 auto
      .item
        background #fff
        margin-bottom 10px
        padding 10px 0
        div
          display flex
          justify-content space-between
          p
            color #5A4347
            font-size 15px
            line-height 18px
            margin 5px 10px
            word-break:break-all
          .itemKey
            width 30%
          .itemVal
            width 70%
            text-align right

</style>
